<template>
  <div class="container">
    <!-- 查询form  -->
    <div class="search_wrap">
      <el-form :data="oldSearchData" ref="search_wrap" label-width="80px">
        <el-row :gutter="10">
          <template v-for="(item, index) in searchDataList">
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6" :key="index">
              <el-form-item :label="item.label">
                <template v-if="item.type === 'text'">
                  <el-input v-model.trim="oldSearchData[item.code]" placeholder="请输入内容" size="small"></el-input>
                </template>
                <template v-if="item.type === 'select'">
                  <el-select v-model="oldSearchData[item.code]" :multiple="item.multiple || false" filterable>
                    <el-option v-for="(vo, i) in (optionsObj[item.options] || [])" :key="i" :label="vo.label" :value="vo.value"></el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
          </template>
          <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
            <!-- 按钮区域 -->
            <div class="btn_wrap">
              <el-button type="primary" class="btnYellow" size="small" icon="el-icon-search" @click="searchFunc">搜 索</el-button>
              <el-button size="small" icon="el-icon-refresh-right" @click="resetFunc">重 置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 操作按钮 -->
    <div class="handle_wrap">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="addFunc">新 增</el-button>
    </div>
    <!-- 表格列表-->
    <div class="table_wrap" style="padding: 10px 20px;">
      <div class="table_box">
        <Table :theadData="theadData" :tableData="tableData" :hasCheck="false">
          <template v-slot:ope="{ scope }">
            <div>
              <el-button type="text" @click="editFunc(scope.row)">编辑</el-button>
              <drawerDictionary :currentDic="scope.row.id">
                <el-button type="text">字典配置</el-button>
              </drawerDictionary>
              <el-popconfirm title="您确定要删除这个字典数据吗？" cancelButtonType="" @onConfirm="deleteFunc(scope.row)">
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </div>
          </template>
        </Table>
      </div>
      <div class="page_box" v-if="totalSize > 0">
        <el-pagination background :current-page="currentPage" :page-sizes="[10, 20, 30, 40,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
    <!-- 新增字典 -->
    <el-dialog :visible.sync="dialogVisible" :title="titleDiag" width="500px">
      <div class="operate_container" style="box-shadow: none;">
        <div class="operate_item" style="width: 100%">
          <div class="operate_left">
            <span class="need">*</span>字典名称：</div>
          <div class="operate_right">
            <el-input v-model.trim="dictionaryAdd.dictName" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="operate_item" style="width: 100%">
          <div class="operate_left">
            <span class="need">*</span>字典编号：</div>
          <div class="operate_right">
            <el-input v-model.trim="dictionaryAdd.dictCode" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="operate_item" style="width: 100%">
          <div class="operate_left">描述：</div>
          <div class="operate_right">
            <el-input v-model.trim="dictionaryAdd.description" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </div>
      <div style="text-align: center;">
        <el-button type="primary" @click="configSureFunc">确 定</el-button>
        <el-button @click="dialogVisible=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Table from "@/components/table/table.vue";
import drawerDictionary from "./drawerDictionary.vue";
import * as apiObj from "@/api/dictionaryData.js";
export default {
  name: "online_dictionary_data",
  components: {
    Table,
    drawerDictionary
  },
  props: {},
  data() {
    return {
      // 查询字段
      oldSearchData: {
        dictName: "",
        dictCode: ""
      },
      // 查询字段列表
      searchDataList: [
        {
          label: "字典名称",
          code: "dictName",
          type: "text"
        },
        {
          label: "字典编号",
          code: "dictCode",
          type: "text"
        }
      ],
      // 表头数据
      theadData: [
        { name: "#", code: "index", width: 80 },
        { name: "字典名称", code: "dictName" },
        { name: "字典编号", code: "dictCode" },
        { name: "描述", code: "description" },
        { name: "操作", code: "cz", slotName: "ope", width: 260 }
      ],
      // 表格数据
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      visibleDel: false,
      // 新增、编辑字典弹窗
      dialogVisible: false,
      titleDiag: "新增",
      dictionaryAdd: {
        dictName: "",
        dictCode: "",
        description: ""
      }, //新增obj
      currentId: "" //当前编辑的字典id
    };
  },
  created() {},
  mounted() {
    // 获取列表数据
    this.getDictionaryList();
  },
  methods: {
    /**
     * @name searchFunc
     * @description 根据查询条件查询表格
     * @author wqy
     * @date 2020-09-03 14:14:46
     */
    searchFunc() {
      this.handleCurrentChange(1);
    },
    /**
     * @name resetFunc
     * @description 重置搜索条件方法
     * @author wqy
     * @date 2020-09-03 14:18:21
     */
    resetFunc() {
      this.oldSearchData = {
        dictName: "",
        dictCode: ""
      };
      this.handleCurrentChange(1);
    },
    /**
     * @name getDictionaryList
     * @description 获取字典表
     * @author wqy
     * @date 2020-09-03 14:18:21
     */
    async getDictionaryList() {
      let { dictName, dictCode } = this.oldSearchData;
      const res = await apiObj.listDictionary({
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        dictName: dictName,
        dictCode: dictCode
      });
      let list = res.data.list || [];
      list.map((item, index) => {
        item.index = this.pageSize * (this.currentPage - 1) + 1 + index;
      });
      this.tableData = list;
      this.totalSize = res.data.total || 0;
    },
    /**
     * @name handleCurrentChange
     * @description 切换分页
     * @author wqy
     * @date 2020-09-03 14:22:12
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getDictionaryList();
    },
    /**
     * @name handleSizeChange
     * @description 切换每页展示条数
     * @author wqy
     * @date 2020-09-03 14:22:12
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    /**
     * @name addFunc
     * @description 新增字典
     * @author wqy
     * @date 2020-09-03 14:33:44
     */
    addFunc() {
      this.titleDiag = "新增";
      this.dictionaryAdd = {
        dictName: "",
        dictCode: "",
        description: ""
      }; //新增obj
      this.dialogVisible = true;
    },
    /**
     * @name editFunc
     * @description 编辑字典
     * @author wqy
     * @date 2020-09-03 14:33:44
     */
    editFunc(row) {
      this.titleDiag = "编辑";
      for (let key in this.dictionaryAdd) {
        this.dictionaryAdd[key] = row[key];
      }
      this.currentId = row.id;
      this.dialogVisible = true;
    },
    /**
     * @name getSysDictByDictCode
     * @description 根据code查重-字典编号不能重复
     * @author wqy
     * @date 2020-09-04 09:43:05
     */
    async getSysDictByDictCode() {
      const res = await apiObj.getSysDictByDictCode({
        dictCode: this.dictionaryAdd.dictCode
      });
      return res.data;
    },
    /**
     * @name configSureFunc
     * @description 新增编辑字典----确定按钮
     * @author wqy
     * @date 2020-09-03 14:39:50
     */
    async configSureFunc() {
      let { dictName, dictCode, description } = this.dictionaryAdd;
      if (dictName === "") {
        this.$message({
          message: "字典名称不能为空",
          type: "warning"
        });
        return;
      }
      if (dictCode === "") {
        this.$message({
          message: "字典编号不能为空",
          type: "warning"
        });
      }
      Promise.all([this.getSysDictByDictCode()]).then(async res1 => {
        if (res1[0] && res1[0].length > 0) {
          this.$message({
            message: `字典编号不能重复，请重新填写字典编号`,
            type: "warning"
          });
          return;
        }
        let api = "addDictionary";
        if (this.titleDiag == "编辑") {
          api = "editDictionary";
        }
        const res = await apiObj[api]({
          description: description,
          dictName: dictName,
          dictCode: dictCode,
          id: this.titleDiag == "编辑" ? this.currentId : null
        });
        if (res.status === 1000) {
          this.$message({
            message: `字典${this.titleDiag}成功`,
            type: "success"
          });
          this.dialogVisible = false;
          this.handleCurrentChange(1);
        }
      });
    },
    /**
     * @name deleteFunc
     * @description 删除数据
     * @author wqy
     * @date 2020-09-03 14:53:47
     */
    async deleteFunc(row) {
      const res = await apiObj.deleteDictionary({
        id: row.id
      });
      this.$message({
        type: "success",
        message: "删除成功!"
      });
      this.handleCurrentChange(1);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../jcsz/common-switch.scss";
.container {
  background-color: #fff;
  min-height: calc(100vh - 120px);
}
.need {
  color: red;
  padding-right: 3px;
}
.search_wrap {
  padding: 20px 20px 10px;
}
.btn_wrap {
  padding-left: 20px;
}
.search_wrap {
  border-bottom: 1px solid #eee;
  >>> {
    .el-form {
      .el-form-item {
        margin-bottom: 10px;
        .el-form-item__label {
          color: #666;
          font-weight: 400;
        }
        .el-select {
          width: 100%;
        }
        // width: 25%;
        // display: inline-block;
        // vertical-align: top;
      }
    }
  }
}
.table_wrap {
  padding: 10px;
}
.page_box {
  padding-bottom: 5px;
  text-align: center;
}
.el-dropdown-link {
  color: #02c58d;
  cursor: pointer;
}
.formTable_wrap {
  padding: 0 20px;
}
.dialog-footer {
  display: block;
  text-align: center;
  padding-top: 20px;
}
.drawer_wrap {
  >>> {
    [role="heading"] {
      outline: none !important;
    }
  }
}
.approve_history_wrap {
  max-height: 500px;
}
.item_p_wrap {
  line-height: 24px;
  padding: 4px 0;
  span {
    color: #888;
  }
  .item_desc {
    display: inline-block;
    width: 80px;
    color: #999;
  }
}
.borderTop {
  border-top: 1px solid #dcdfe6;
  padding-top: 15px;
  margin-top: 15px;
}
</style>
